<template>
    <view class="contion">
        <u-sticky>
            <view class="header_box">
                <view class="xzDate_box" @click="dateShowBtn" v-if="isdate == false">选择日期</view>
                <view class="xzDate_box" @click="dateShowBtn" v-else>{{ date }}</view>
                <view class="jieduan_box">
                    <view :class="status == 2 ? 'tixian_box' : 'tixian_box1'" @click="piatrlam">已提现</view>
                    <view :class="status == 1 ? 'dashenhe_box' : 'dashenhe_box1'" @click="review">审核中</view>
                    <view :class="status == 3 ? 'dbohui_box' : 'dbohui_box1'" @click="johnson">已驳回</view>
                </view>
            </view>
            <view class="guize_box">
                <text @click="guizeBtn">规则</text>
            </view>
        </u-sticky>
        <view class="neirong_box" v-for="(item, index) in recordList" :key="index">
            <view class="one_box">
                <view class="left_txt">提现金额：
                    <text>{{ item.amount }}元</text>
                </view>
                <view class="right_txt" v-if="item.status == 1">审核中</view>
                <view class="right_txt" v-if="item.status == 2">已提现</view>
                <view class="right_txt" v-if="item.status == 3">已驳回</view>
            </view>
            <view class="two_box">
                <view class="left_txt"></view>
            </view>
            <view class="three_box">
                <view class="left_txt">提现时间：
                </view>
                <view class="right_txt">{{item.updated_at}}</view>
            </view>
        </view>
        <u-calendar v-model="dateShow" :mode="mode" @change="dateChange">
            <view slot="tooltip">
                <view class="title" @click="quanbu">
                    全部
                </view>
            </view>
        </u-calendar>
    </view>
</template>
<script>
export default {
    data() {
        return {
            status: 2,//提现状态3:已驳回 2:已提现 1:审核中 
            isdate: false,//选择日期和日期文案的切换
            date: "",//选择日期
            dateShow: false,//是否显示日期组件
            mode: 'date',//单个日期
            recordList: [],//提现列表
            page: 1,//分页
            flag: true,// 防抖开关 防止用户不停的下拉
        }
    },
    onShow() {
        this.getInfo()
    },
    onReachBottom() {
        if (this.flag) {
            this.getInfo()
        } else {
            uni.showToast({
                title: "已经到底了",
                icon: 'none'
            })
        }
    },
    methods: {
        // 提现列表
        getInfo() {
            let data = {
                date: this.date,
                status: this.status,
                page: this.page
            }
            uni.showLoading({
                title: '加载中~',
            })
            this.$Request.get(this.$api.user.cashList, data).then(res => {
                uni.hideLoading()
                var recordList = res.data.list
                this.page++
                this.recordList = this.recordList.concat(recordList);// 拼接回来的数据
                // 当回来的数据小于十条得时候 不让再请求了 否则继续请求
                if (recordList.length < 10) {
                    this.flag = false
                } else {
                    this.flag = true
                }
            })
        },
        // 点击日期
        dateShowBtn() {
            this.dateShow = true
        },
        // 选择日期
        dateChange(e) {
            this.date = e.result
            this.isdate = true
            this.page = 1
            this.recordList = []
            this.getInfo()
        },
        // 全部时间
        quanbu() {
            this.date = ""
            this.isdate = false
            this.dateShow = false
            this.page = 1
            this.recordList = []
            this.getInfo()
        },
        // 规则
        guizeBtn() {
            uni.navigateTo({
				url: '/userPage/user/agreement?id=' + 110
			});
        },
        // 已提现
        piatrlam() {
            this.page = 1
            this.recordList = []
            this.status = 2
            this.getInfo()
        },
        // 审核中
        review() {
            this.page = 1
            this.recordList = []
            this.status = 1
            this.getInfo()
        },
        // 已驳回
        johnson() {
            this.page = 1
            this.recordList = []
            this.status = 3
            this.getInfo()
        },
    }
}
</script>
<style lang="scss" scoped>
/deep/.u-sticky-wrap {
    background-color: #262626 !important;
}

.contion {
    width: 100vw;
    min-height: 100vh;
    background-color: #262626;

    .header_box {
        width: 96%;
        height: 80rpx;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #262626;

        .xzDate_box {
            width: 222rpx;
            height: 58rpx;
            background: #FFB02E;
            border-radius: 70rpx 70rpx 70rpx 70rpx;
            opacity: 1;
            text-align: center;
            color: #fff;
            line-height: 58rpx;
        }

        .jieduan_box {
            width: 460rpx;
            height: 58rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .tixian_box,
            .dashenhe_box,
            .dbohui_box {
                width: 138rpx;
                height: 46rpx;
                border: 1rpx solid #ff9f00;
                background: rgba(0, 0, 0, 0.1);
                border-radius: 60rpx 60rpx 60rpx 60rpx;
                text-align: center;
                line-height: 46rpx;
                font-size: 28rpx;
                font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
            }

            .tixian_box1,
            .dashenhe_box1,
            .dbohui_box1 {
                width: 138rpx;
                height: 46rpx;
                border-radius: 60rpx 60rpx 60rpx 60rpx;
                text-align: center;
                line-height: 46rpx;
                font-size: 28rpx;
                font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
            }
        }
    }

    .guize_box {
        width: 96%;
        height: 46rpx;
        line-height: 46rpx;
        font-size: 32rpx;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #FFFFFF;
        text-align: right;
        margin-bottom: 8rpx;
        background-color: #262626;
    }

    .neirong_box {
        width: 706rpx;
        height: 244rpx;
        background: rgba(255, 231, 192, 0.1);
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        opacity: 1;
        border: 2rpx solid #FED187;
        margin: auto;
        padding: 18rpx 28rpx 28rpx 28rpx;
        margin-bottom: 20rpx;

        .one_box {
            width: 100%;
            height: 46rpx;
            line-height: 46rpx;
            margin-bottom: 36rpx;

            .left_txt {
                float: left;
                font-size: 28rpx;
                font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;

                text {
                    font-size: 32rpx;
                    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                    font-weight: 500;
                    color: #FFAE2A;
                }
            }

            .right_txt {
                float: right;
                font-size: 28rpx;
                font-family: Source Han Sans CN-Bold, Source Han Sans CN;
                font-weight: 700;
                color: #FFAE2A;
            }
        }

        .two_box {
            width: 100%;
            height: 46rpx;
            line-height: 46rpx;
            margin-bottom: 36rpx;

            .left_txt {
                float: left;
                font-size: 28rpx;
                font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
            }
        }

        .three_box {
            width: 100%;
            height: 46rpx;
            line-height: 46rpx;

            .left_txt {
                float: left;
                font-size: 28rpx;
                font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
            }

            .right_txt {
                float: right;
                font-size: 28rpx;
                font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                font-weight: 500;
                color: #FFFFFF;
            }
        }
    }
}
</style>